<template>
  <div>
    <div class="mar_t20 ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>售卡统计</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">今日售卡数量</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.todayCount || 0}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">实付汇总</div>
                <button type="button" class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span>
                    <i class="el-icon-question"></i>
                  </span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">今日售卡金额</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.todayMoney || 0}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">应付汇总</div>
                <button type="button" class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span>
                    <i class="el-icon-question"></i>
                  </span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">总售卡数量</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.count || 0}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">优惠汇总</div>
                <button type="button" class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span>
                    <i class="el-icon-question"></i>
                  </span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">总售卡金额</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.money || 0}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">付款笔数</div>
                <button type="button" class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span>
                    <i class="el-icon-question"></i>
                  </span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="outmain ba_f mar_t20">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>当面付订单</span>
        </div>
      </div>
      <div class="flex-bet flex-y-top">
        <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
          <div>
            <el-form-item label="订单号">
              <el-input v-model="formInline.keyword" size="medium" placeholder="请输入订单号" @input="fetchData"></el-input>
            </el-form-item>
            <el-form-item label="售卡时间" class="mar_l20">
              <el-radio-group v-model="formInline.timeType" class="mar_r20" @change="fetchData">
                <el-radio-button label="1">今天</el-radio-button>
                <el-radio-button label="2">昨天</el-radio-button>
                <el-radio-button label="3">一周</el-radio-button>
              </el-radio-group>
              <el-date-picker v-model="timeData" type="daterange" range-separator="至" value-format="yyyy-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" @change="changerTime"></el-date-picker>
            </el-form-item>
            <el-form-item class="mar_l20">
              <el-button type="primary" @click="fetchData" size="medium">搜索</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="mar_t20">
        <el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
          <el-table-column prop="portrait" label="用户信息" width="300">
            <template slot-scope="scope">
              <div class="flex flex-y-top">
                <div class>
                  <img class="goodlogo bor_rad50" :src="scope.row.portrait" />
                </div>
                <div class="mar_l10">
                  <div class>
                    <div class>{{scope.row.userName}}</div>
                    <div class="fon_12 color_6">用户ID：{{scope.row.userId}}</div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="outTradeNo" label="订单编号"></el-table-column>
          <el-table-column prop="payAt" label="购买时间"></el-table-column>
          <el-table-column prop="money" label="购买金额">
            <template slot-scope="scope">
              <div class="color-green wei">+{{scope.row.money}}</div>
              <div class="fon_12">
                <span v-show="scope.row.payMode=='1'">微信支付</span>
                <span v-show="scope.row.payMode=='5'">余额支付</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="到期时间"></el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="10" :current-page.sync="formInline.currentPage" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getOrderStatistics, getViplist } from '@/api/instore';
export default {
  data() {
    return {
      formInline: {
        timeType: '1',
        keyword: '',
        startTime: '',
        endTime: '',
        currentPage: 1
      },
      timeData: [],
      list: [],
      listLoading: false,
      selectRows: '',
      elementLoadingText: '正在加载...',
      total: 0,
      zhData: {}
    };
  },
  created() {
    this.fetchData();
    this.cashierStatistics();
  },
  methods: {
    changerTime(msg) {
      this.formInline.startTime = msg[0];
      this.formInline.endTime = msg[1];
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.formInline.currentPage = page;
      this.fetchData();
    },
    cashierStatistics() {
      getOrderStatistics().then((res) => {
        if (res.code == 1) {
          Object.assign(this.zhData, res.data);
        }
      });
    },
    fetchData() {
      getViplist(this.formInline).then((res) => {
        if (res.code == 1) {
          this.total = res.count;
          this.list = res.data;
        }
      });
    }
  }
};
</script>
